<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
	  xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="keywords" content="后台bootstrap框架,bootstrap tabe表格">
		<meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">
		<title>权限列表</title>
		<link href="../../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
		<link href="../../static/css/plugins/bootstrap-table/bootstrap-table.min.css" th:href="@{/css/plugins/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet">
		<link href="../../static/css/font-awesome.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
		<link href="../../static/css/animate.css" th:href="@{/css/animate.css}" rel="stylesheet">
		<link href="../../static/css/style.css" th:href="@{/css/style.css}" rel="stylesheet">
		<style type="text/css">
			.table{
				border-collapse: collapse; 
				font-size: 11px;
				border: 1px solid #778899;
			}
			.table-hover td{
				border: 1px solid #E6E6FA;
				padding: 4px 3px 2px 3px;
			}
			
			.table-hover .row_active {
			    background-color: #D0DCF3;
			}

			.table .header{
				font-size: 11px;
				font-weight: 600;
			}
			.table-hover .image_hand{
				border: 0;
				cursor:pointer;
				align:absmiddle;
			}
			
			.table-hover .image_nohand{
				border: 0;
				align:absmiddle;
			}
		</style>
	</head>

	<body class="gray-bg">
		<div class="container-fluid">
			<div class="ibox-content padding-s-0">
				<div class="ibox float-e-margins">
					<div class="example" id="div1">
						<div class="btn-group hidden-xs" id="moduleTableToolbar" role="group">

							<button  type="button" class="btn btn-outline btn-default" onclick="addModuleModal('add');">
                	<i class="glyphicon glyphicon-plus" aria-hidden="true"></i>
            	</button>
							<button  type="button" class="btn btn-outline btn-default" onclick="addModuleModal('edit');">
								<i class="glyphicon glyphicon-edit" aria-hidden="true"></i>
							</button>
							<button type="button" class="btn btn-outline btn-default" onclick="delModule();">
	                <i class="glyphicon glyphicon-trash" aria-hidden="true"></i>
	            </button>
              <button type="button" id="Openbtn" class="btn btn-outline btn-default" onclick="showAll();">
	                <i class="glyphicon glyphicon-folder-open" aria-hidden="true"></i>
	            </button>
						</div>
						<!--<table id="moduleListTable"></table>-->
					</div>
				</div>
				<!-- End Example Events -->
			</div>
		</div>

		<!--添加编辑模态框（Modal） -->
		<div class="modal fade" id="editModal"  role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="myModalLabel">添加</h4>
					</div>
					<div class="modal-body">
						<form id="eidtModuleForm"  class="form-horizontal" role="form">
							<div class="form-group">
								<label for="mcode" class="col-sm-2 control-label">资源ID</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" id="mcode" name="mcode" placeholder="请输入ID">
								</div>
							</div>
							<div class="form-group">
								<label for="mname" class="col-sm-2 control-label">名称</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" id="mname" name="mname" placeholder="请输名称">
								</div>
							</div>
							<div class="form-group">
								<label for="murl" class="col-sm-2 control-label">url</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" id="murl" name="murl" placeholder="请输url">
								</div>
							</div>
							<div class="form-group">
								<label for="parent" class="col-sm-2 control-label">上级节点</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" id="parent" name="parent" placeholder="请输上级节点">
								</div>
							</div>
							<div class="form-group">
								<label  class="col-sm-2 control-label">说明</label>
								<div class="col-sm-10">
									<textarea class="form-control" rows="3" name="explains"></textarea>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label">图标</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" name="micon" id="micon" style="width: 260px;float: left;">
									<button type="button" class="btn btn-default" data-toggle="modal" data-target="#IconModal">选择</button>
								</div>
							</div>
							<div class="form-group">
								<label for="sort" class="col-sm-2 control-label">排序</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" id="sort" name="sort" placeholder="请输排序">
								</div>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-primary" onclick="submitFormFun();">提交</button>
						<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal -->
		</div>

		<!--添加icon模态框（Modal） -->
		<div class="modal fade" id="IconModal"  role="dialog" aria-labelledby="iconModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="iconModalLabel">选择</h4>
					</div>
					<div class="modal-body">
						<ul class="bs-glyphicons">
							<li><span class="glyphicon glyphicon-home" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-user" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-align-justify" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-th" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-folder-close" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-list" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-asterisk" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-backward" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-ban-circle" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-barcode" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-bell" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-book" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-bookmark" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-briefcase" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-lock" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-camera" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-certificate" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-check" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-circle-arrow-down" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-cloud" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-cloud-download" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-cloud-upload" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-cog" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-comment" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-credit-card" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-cutlery" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-signal" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-export" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-time" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-facetime-video" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-file" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-film" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-fire" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-flag" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-flash" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-floppy-open" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-floppy-remove" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-floppy-saved" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-picture" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-fullscreen" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-gift" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-globe" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-headphones" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-hand-up" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-hand-left" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-hand-right" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-heart" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-leaf" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-link" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-move" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-music" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-off" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-pause" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-phone" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-print" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-refresh" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-repeat" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-send" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-sort" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-star" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-star-empty" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-tags" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-tint" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-tree-conifer" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-transfer" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-usd" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-volume-down" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-volume-off" aria-hidden="true"></span></li>
							<li><span class="glyphicon glyphicon-volume-up" aria-hidden="true"></span></li>
						</ul>
					</div>
				</div>
			</div>
		</div>

		<!-- 全局js -->
		<script src="../../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
		<script src="../../static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
		<script src="../../static/js/plugins/layer/layer.min.js" th:src="@{/js/plugins/layer/layer.min.js}"></script>

		<!-- TreeGrid table -->
		<script src="../../static/js/plugins/dataTables/TreeGrid.js" th:src="@{/js/plugins/dataTables/TreeGrid.js}"></script>
		<!--工具方法-->
		<script src="../../static/js/content.js" th:src="@{/js/content.js}"></script>
		<!-- Peity -->
		<script type="text/javascript">
/*
			通过指定的方法来自定义栏数据
		*/
		function customCheckBox(row, col){
			return "<input type='checkbox' name='city_name' onclick='selCk(this)'  id='"+row.mcode+"'>";
		}
		//图标
		function customerIcon(row){
			return "<span class='"+row.micon+"' aria-hidden='true'></span>";
		}
		//行点击事件
		function itemClickEvent(id, index, data){
		    console.log("选中行：",data);
		}
		//表格设置
		var config = {
				id: "moduleListTable",
				width: "800",
				renderTo: "div1",
				headerAlign: "left",
				headerHeight: "30",
				dataAlign: "left",
				indentation: "20",
				folderOpenIcon: "/js/plugins/dataTables/images/folderOpen.gif",
				folderCloseIcon: "/js/plugins/dataTables/images/folderClose.gif",
				defaultLeafIcon: "/js/plugins/dataTables/images/defaultLeaf.gif",
				hoverRowBackground: "false",
				folderColumnIndex: "1",
				itemClick: "itemClickEvent",
				columns:[
				    //headerAlign表头水平位置，dataAlign数据水平位置
					{headerText: "", headerAlign: "center", dataAlign: "center", width: "20", handler: "customCheckBox"},
					{headerText: "资源名称", dataField: "mname", headerAlign: "center", dataAlign: "left"},
                    {headerText: "资源ID", dataField: "mcode", headerAlign: "center", width: "150"},
					{headerText: "资源地址", dataField: "murl", headerAlign: "center", dataAlign: "left", width: "300"},
					{headerText: "资源图标", dataField: "micon", headerAlign: "center", dataAlign: "center", width: "100",handler:"customerIcon"},
                    {headerText: "描述", dataField: "explains", headerAlign: "center", dataAlign: "left", width: "300"},
                    {headerText: "父节点", dataField: "parent", headerAlign: "center", dataAlign: "center", width: "50",hidden:true},
                    {headerText: "排序", dataField: "sort", headerAlign: "center", dataAlign: "center", width: "50"}
				],
				url:"/module/selectZtreeModule"
			};
			//创建一个组件对象
			var treeGrid = new TreeGrid(config);
			treeGrid.show();
			
			$(function() {
				$(".bs-glyphicons li").click(function () {
					var aa = $(this).find("span").attr("class");
					$("#micon").val(aa);
					$('#IconModal').modal('hide');
				});
			
			});
		
		/*
			展开、关闭所有节点。
			isOpen=Y表示展开，isOpen=N表示关闭
		*/
		function showAll(){
			if($("#Openbtn>i").hasClass("glyphicon-folder-close")){
				treeGrid.expandAll("Y");
				$("#Openbtn>i").removeClass("glyphicon-folder-close").addClass("glyphicon-folder-open");
			}else{
				treeGrid.expandAll("N");
				$("#Openbtn>i").removeClass("glyphicon-folder-open").addClass("glyphicon-folder-close");
			}
		
		}
		
		//级联选中、取消选中
		//(取消)选中父节点，其子节点自动(取消)选中
		function selCk(ck)
		{
			var ckId = $(ck).attr("id");
			var tr = $(ck).parent().parent();
	
			treeGrid.checkSubs(tr.attr("id"),$(ck).prop("checked"));
		}
		
		/*
			取得当前选中的行，方法返回TreeGridItem对象
		*/
		function selectedItem(){
			var treeGridItem = treeGrid.getSelectedItem();
			if(treeGridItem.data!=null){
				//获取数据行属性值
				alert(treeGridItem.id + ", " + treeGridItem.index + ", " + treeGridItem.data.mname);
				
				//获取父数据行
				var parent = treeGridItem.getParent();
				if(parent!=null){
					console.log(parent);
					alert("parent："+parent.data.mname);
					//jQuery("#currentRow").val(parent.data.name);
				}else{
					alert("选中节点没有父节点");
				}
				
				//获取子数据行集
				var children = treeGridItem.getChildren();
				
				//暂时无法获得选中节点的子节点的名称
				if(children!=null && children.length>0){
					var child_id='';
					for(var i=0;i<children.length;i++)
					{
						console.log(children[i]);
						child_id=child_id+children[i].id+',';
					}
					alert("选中节点子节点的ID:"+child_id.substring(0,child_id.length-1));
					
					//jQuery("#currentRow").val(children[0].data.name);
				}else{
					alert("选中节点没有子节点");
				}
			}
		}
	//打开添加或编辑弹层
	function addModuleModal(evan) {
		if(evan=="add"){
			document.getElementById("eidtModuleForm").reset();
			$("#myModalLabel").text("添加");
			//如果有选中行，则默认添加该节点的下级资源
            var select =treeGrid.getSelectedItem().data;
            if(select!=null){
				$("#parent").val(select.mcode);
			}
			$('#editModal').modal('show');
		}else{
			var select =treeGrid.getSelectedItem().data;
			if(select==null){
				layer.alert("请选择要编辑的行！",{icon: 3});return;
			}
			$("#eidtModuleForm").populateForm(select);
			$("#myModalLabel").text("编辑");
			$('#editModal').modal('show');
		}

	}
	//提交表单
	function submitFormFun() {
		var evan = $("#myModalLabel").text();
		var url="/module/addModule";
		if(evan=="编辑"){
			url="/module/editModule";
		}
		$.ajax({
				url: url,
				method: "POST",
				dataType: "json",//预期服务器返回的数据类型
				data: $('#eidtModuleForm').serialize(),
				success: function (result) {
					console.log(result);//打印服务端返回的数据(调试用)
					if (result.code == 200) {
						layer.msg(result.msg,{icon:6,time:800});
						$("#editModal").modal("hide");
						$("#moduleListTable").remove();
                        treeGrid.show();
					}else{
						layer.msg(result.msg,{icon:5,time:800});
					}
				},
				error : function() {
					layer.alert("系统异常！",{icon: 3});
				}
			});
		}
        //删除资源
        function delModule() {
            var select = $('#moduleListTable').bootstrapTable("getSelections");
            if(select.length==0){
                layer.alert("请选择要编辑的行！",{icon: 3});
                return;
            }
            var mcode = select[0].mcode;
            $.ajax({
                url: "/module/delModule",
                method: "POST",
                dataType: "json",//预期服务器返回的数据类型
                data: {mcode:mcode},
                success: function (result) {
                    console.log(result);//打印服务端返回的数据(调试用)
                    if (result.code == 200) {
                        layer.msg(result.msg,{icon:6,time:800});
                        $('#moduleListTable').bootstrapTable('refresh');
                    }else{
                        layer.msg(result.msg,{icon:5,time:800});
                    }
                },
                error : function() {
                    layer.alert("系统异常！",{icon: 3});
                }
            });
        }
		</script>
	</body>

</html>